<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css" >
    <link rel="stylesheet" href="/css/elementui.css" type="text/css">
    <link href="/css/login.css" rel="stylesheet" type="text/css" >
    <style>
        .el-icon-success {
            display: none;
        }
        .el-icon-warning {
            display: none;
        }
        .el-icon-error {
            display: none;
        }
    </style>
</head>
<body>
    <div class="login" style='background-image: url("/images/bg.jpg");background-repeat: no-repeat; background-size:100% 100%;background-attachment:fixed;' id="login">
        <div class="login-box">
           <div>
                <p>登录</p>
                <div class="box">
                    <input placeholder="请输入用户名" v-model="username"/>
                </div>
                <div class="box">
                    <input placeholder="请输入密码" type="password" v-model="passsword"/>
                </div>
                <button @click="login">登录</button>
               <div class="to" @click="toRegister">还没有账号？去注册</div>
           </div>
        </div>

        <div></div>
    </div>
    <script src="/tools/vue.js"></script>
    <script src="/tools/http.js"></script>
    <script src="/tools/elementui.js"></script>
    <script>
        new Vue({
            el: '#login',
            data() {                   
                return {
                    username: '',
                    passsword: ''
                }
            },
            methods: {
                toRegister() {
                    window.location.href="/register"
                },

                login() {
                    let that = this;

                   if(!this.username) {
                    this.$message({
                        message: '请输入用户名',
                        type: 'warning'
                    });
                    return
                   }

                   if(!this.passsword) {
                    this.$message({
                        message: '请输入密码',
                        type: 'warning'
                    });
                    return;
                   }

                   ajax({
                       type: 'post',
                       url: '/login',
                       ansyc: false,
                       data: {
                           username: this.username,
                           passsword: this.passsword
                       },
                       success(result){
                           // 需要进入到聊天室   /index
                           let res = JSON.parse(result)
                           // /info  /search   /master 主页
                           if(res.code == 200 && res.message == '登录成功!') {
                               //1管理员， 0普通用户
                               if(res.role)  {
                                 window.location.href="/admin"
                               }else  {
                                   window.location.href="/master"
                               }
                           }else {
                               that.$message({
                                    message: res.message,
                                    type: 'error'
                                });
                           }
                       }
                   })
                }
            }
        })
    </script>
</body>
</html>